/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import Taro, { Component } from '@tarojs/taro'
import { Swiper, SwiperItem, ScrollView } from '@tarojs/components'
import { AtTabs, AtTabsPane } from 'taro-ui'

// project
import { CPage, CContent, CHeader, CFooter, CFloat, CAround, CBetween, CCenter, CColumn, CRow, CWrap, CLine, CHand, CItemX, CItemY, CText, CLabel, CSvg, CImage, CButton } from '../../library/comp';
import { Base64, Gen, Time, Zip, Session, Storage, Toast, Loading, Modal, ActionSheet } from '../../library/func';
import Icon from '../../project/style/icon';
import Http from '../../project/func/http/http'

// 引入自定义组件
import proj_Home_List from '../../project/comp/homeList/proj_Home_List'


/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class Index extends Component {
	
	/*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
	constructor(props) {
		super(props);

		/**
		 * state
		 */
		this.state = {
			background: '#f60',
			status: 'success',
			// tab切换
			tabList:[
				{title:'今日上新', index:1},
				{title:'热销爆款', index:2}
			],
			tab:1,
			// 获取屏幕高度
			scrollHeight: wx.getSystemInfoSync().windowHeight,
			// 获取屏幕宽度
			scrollWidth: wx.getSystemInfoSync().windowWidth,
			// tabbarclass
			tabbarClass: 'null',
			tabbarIndicatorHeight: 0,
			// 滚动的距离
            scroll: 0,
            // 定位距离
            scrolltop: 0,
			// 首页数据
			// banner图
			banner: [],
			// 类别
			cat:[],
			// 广告
			advert:{
				url:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2853350006,97808151&fm=26&gp=0.jpg'
			},
			// 今日上新商品
			new_prod:[],
			// 热销爆款商品
			hot_prod:[],
			current:0,
			// 用户信息
			userInfo: {},
		}
	}

	/*------------------------------------------------------------------------------------
	 * 生命周期
	 *-----------------------------------------------------------------------------------*/
	// willMount
	componentWillMount() {
		// 获取用户信息，判定身份
		Http.get({
			url: 'usercenter/info.php',
			
			success: (data)=> {
				// console.log('用户信息', data)
				this.setState({
					userInfo: data
				})
			},
			error: (res)=> {
				// console.log('逻辑错误');
				// console.log(res);
			},
		});

	}

	// didMount
	componentDidMount() {

		Http.get({
			url: 'home/home.php',
			success: (data)=> {
				// console.log('成功');
				// console.log(data);
				this.setState({
					banner: data.banner,
					cat: data.category,
					new_prod: data.product_new,
					hot_prod: data.product_hot,
					advert: data.advert
				})
			},
			error: (res)=> {
				// console.log('逻辑错误');
				// console.log(res);
			}
		});

	}
	
	/*------------------------------------------------------------------------------------
	 * 事件处理
	 *-----------------------------------------------------------------------------------*/
	// onClick
	onClick = (id, e)=> {
		// console.log('onClick: ' + id)
    }
    
    // onRedirect
    onRedirect = (url, e)=> {
        wx.redirectTo({
            url: url
        })
    }

    // onNavigate
    onNavigate = (url, e)=> {
		wx.navigateTo({
			url: url
		})
	}
	
	handleClick = (value) => {
		this.setState({
			current: value
		})
	}

	// 监听页面scrollview滚动距离
	onScroll(e){
		wx.createSelectorQuery().select('#tabbarIndicator').boundingClientRect(rect => {
			// // console.log(rect.top)
			if (rect.top - 45 <= 0) {
				if (this.state.tabbarClass == 'position') return;
				this.setState({
					tabbarClass: 'position',
					tabbarIndicatorHeight: 90
				})
			} else {
				if (this.state.tabbarClass == '') return;
				this.setState({
					tabbarClass: 'null',
					tabbarIndicatorHeight: 0
				})
			}
		 }).exec();
		 // console.log(this.state.tabbarIndicatorHeight);
	}
	
	// tab切换
	tab(index){
		this.setState({
			tab: index
		})
	}
	
	/*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/
	config = {
        navigationBarTitleText: '首页',
        navigationBarBackgroundColor: '#dd2f3c',
        navigationBarTextStyle: '#fff'
    }

	/*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
	render () {
		return (
			<CPage>
				<ScrollView
					scrollY = {true}
					style={{background:'#f5f5f5',height:this.state.scrollHeight + 'px'}}
					onScroll={this.onScroll}
				>
					
					{/* 轮播图 */}
					<CRow>
						{/* 轮播图 */}
						<Swiper
							autoplay
							indicatorDots
							class='swiperBox f1'
						>
							{this.state.banner.map(item => {
								return (
									<SwiperItem key={item.set_url}>
										<Image lazyLoad={true} src='http://image.cdn.hesq.com.cn/rushbuy/banner/{{item.object.set_image}}' h='800' class='w1'/>
									</SwiperItem>
								)
							})}
						</Swiper>
					</CRow>
					{/* 搜索框 class='searchBox' */}
					<CRow mx='30' abs top='40' onClick={this.onNavigate.bind(this, '/screen/product/list')}>
						<CLine px='16' h='60' class='searchBox' style='width:700rpx'>
							<CSvg icon={Icon.search} color="#eee" w='50' h='50'></CSvg>
							<CText size='26' color='#d3d3d3'>搜索</CText>
						</CLine>
					</CRow>
					

					{/* 类别 */}
					<CRow bg='#fff' >
						<CAround py='20' class='bb'>
							{this.state.cat.map(item => {
								return (
									<CItemY onClick={ this.onNavigate.bind(this, '/screen/product/list?cid=' + item.id) }>
										<CImage src='http://image.cdn.hesq.com.cn/rushbuy/category/{{item.object.set_icon}}' w='108' h='108' ra='108' />
										<CText color='#999' mt='10' size='28'>{item.set_name}</CText>
									</CItemY>
								)
							})}
						</CAround>
					</CRow>

					{/* 广告图 */}
					<CRow bg='#fff' px='20' py='30' mb='20'>
						{/* <Image lazyLoad={true} src={this.state.advert.url} class='w1 h250'/> */}
						<Image lazyLoad={true} src={'http://image.cdn.hesq.com.cn/rushbuy/advert/'+this.state.advert.object.set_image} class='w1 h250'/>
					</CRow>

					{/* 商品 */}
					<CRow id='tabbar' bg='#fff' pt='25' ref='tabbar' class={this.state.tabbarClass}>
						<CAround>
							{this.state.tabList.map(item=>{
								return (
									<CHand size='35' pb='20' class={this.state.tab == item.index ? 'homeActive' : ' '} data-tab={item.index} onClick={this.tab.bind(this, item.index)}>
										{item.title}
									</CHand>
								)
							})}
						</CAround>
					</CRow>
					<CHand id='tabbarIndicator' h={this.state.tabbarIndicatorHeight} bg='#fff'>

					</CHand>
					{/* <CHand style={{height: '45px', width: '100%', background: '#fff'}}></CHand> */}

					{/* 首页商品,今日上新（引用自组件） */}
					{this.state.tab == 1 && <proj_Home_List isvip={this.state.userInfo.is_vip} data={this.state.new_prod} scroll={this.state.scroll} scrolltop={this.state.scrolltop}></proj_Home_List>}

					{/* 首页商品,热销爆款（引用自组件） */}
					{this.state.tab == 2 && <proj_Home_List isvip={this.state.userInfo.is_vip} data={this.state.hot_prod} scroll={this.state.scroll} scrolltop={this.state.scrolltop} ></proj_Home_List>}


					</ScrollView>

				{/* 底部导航 */}
				{/* <CFooter bg='#fff' h='50'></CFooter> */}

			</CPage>
		)
	}
}


